<template>
  <div style="width: 100%; height: 100%">
    <div class="item-title">
      <span style="margin: auto 0">{{ title }}</span>
    </div>
    <div class="item-box" id="attractionGaugeChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "attractionGaugeChart",
  data() {
    return {
      jiangsuAttractions: [
        {city: "南京", a5: 2, a4: 26, total: 80, color: '#3c90ff'},      // 中山陵、夫子庙等
        {city: "苏州", a5: 6, a4: 35, total: 100, color: '#fff225'},     // 拙政园、周庄等
        {city: "无锡", a5: 4, a4: 28, total: 60, color: '#24ffdf'},      // 鼋头渚、灵山大佛等
        {city: "常州", a5: 3, a4: 10, total: 40, color: '#ff9c3c'},     // 恐龙园、天目湖等
        {city: "扬州", a5: 1, a4: 10, total: 30, color: '#7536ff'},      // 瘦西湖、个园等
        {city: "镇江", a5: 1, a4: 8, total: 25, color: '#fff2f5'},      // 金山、西津渡等
        {city: "南通", a5: 1, a4: 9, total: 20, color: '#24ffff'},      // 濠河、狼山等
        {city: "徐州", a5: 1, a4: 12, total: 30, color: '#c9e0ff'},     // 云龙湖、龟山汉墓等
        {city: "盐城", a5: 1, a4: 16, total: 25, color: '#e09cff'},     // 中华麋鹿园、大纵湖等
        {city: "泰州", a5: 1, a4: 7, total: 20, color: '#e09cff'},     // 溱湖湿地、凤城河等
        {city: "淮安", a5: 1, a4: 11, total: 25, color: '#e09cff'},     // 周恩来故里、洪泽湖等
        {city: "连云港", a5: 1, a4: 10, total: 25, color: '#e09cff'},   // 花果山、连岛等
        {city: "宿迁", a5: 1, a4: 7, total: 20, color: '#e09cff'},      // 三台山、项王故里等
      ]
    }
  },
  props: {
    title: {
      type: String,
      default: '各市景点数量分布'
    }
  },
  mounted() {
    this.initGaugeChart()
  },
  methods: {

    initGaugeChart() {
      const myEcharts = echarts.init(document.getElementById('attractionGaugeChart'));
      const Max = Math.max(...this.jiangsuAttractions.map(item => item.total));

      let A5Count = 0; // A5景区总数
      let A4Count = 0; // A4景区总数
      let A5List = [];
      let A4List = [];
      let total = 0;
      this.jiangsuAttractions.map(item => {
        if(item.a5 >= 0) {
          A5Count += item.a5;
        }

        if(item.a4 >= 0) {
          A4Count += item.a4;
        }

        A5List.push(item.a5);
        A4List.push(item.a4);
        total += item.total;
      })

      A5List.map((item, index) => {
        if(item > 0) {
          A5List[index] = Math.floor((item/A5Count) * total * 0.5)
        }
      })

      A4List.map((item, index) => {
        if(item >= 0) {
          A4List[index] = Math.floor((item/A4Count) * total)
        }
      })

      let indicatorList = [];
      this.jiangsuAttractions.map(item => {
        indicatorList.push({
          name: item.city,
          min: 0,
          max: Max,
        })
      })
      let options = {
        color: ['#0290ff', '#ffe533', '#ff4d4d'],
        tooltip: {
          show: false // 弹层数据去掉
        },
        legend: {
          data: [
            {
              name: 'A5景区', icon: 'rect', itemStyle: {
                color: '#ff4d4d', borderWidth: 0 // 设置图例图标的颜色
              },
            },
            {
              name: 'A4景区', icon: 'rect', itemStyle: {
                color: '#0290ff', borderWidth: 0 // 设置图例图标的颜色
              }
            },
            {
              name: '景区总数', icon: 'rect', itemStyle: {
                color: '#ffe533', borderWidth: 0 // 设置图例图标的颜色
              }
            },
          ],
          show: true,
          orient: 'vertical',
          top: 25,
          left: 25,
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 15,
          textStyle: {
            fontSize: 14,
            color: '#edf8ff',
          },
        },
        radar: {
          center: ['50%', '55%'], // 外圆的位置
          radius: '75%',
          name: {
            textStyle: {
              color: '#fff',
              fontSize: 16,
              fontWeight: 400,
              fontFamily: 'PingFangSC-Regular,PingFang SC',
              fontStyle: 'normal',
            }
          },
          indicator: indicatorList,
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: {
            // 指向外圈文本的分隔线样式
            lineStyle: {
              color: 'rgba(255,255,255,0)'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#0ac8ff', // 分隔线颜色
              width: 2 // 分隔线线宽
            }
          }
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: A5List,
                name: 'A5景区',
                areaStyle: {
                  normal: {
                    color: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [{
                        offset: 0, color: 'rgba(255, 56, 56, 0.14)' // 0% 处的颜色
                      },
                        {
                          offset: 0.15, color: 'rgba(255, 56, 56, 0.14)' // 100% 处的颜色
                        },
                        {
                          offset: 0.75, color: 'rgba(255, 56, 56, 0.4)' // 100% 处的颜色
                        },
                        {
                          offset: 1, color: 'rgba(255, 56, 56, 0.8)' // 100% 处的颜色
                        }],
                      global: false // 缺省为 false
                    }
                  }
                },
                symbolSize: [6, 6],
                lineStyle: { //边缘颜色
                  color: 'rgba(255, 56, 56, 0.8)',
                },
                itemStyle: {
                  color: '#fff',
                  borderColor: '#ff6565',
                  borderWidth: 1,
                  shadowBlur: 8,
                  shadowColor: '#ff6565'
                },
              },
              {
                value: A4List,
                name: 'A4景区',
                areaStyle: {
                  normal: {
                    color: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [{
                        offset: 0, color: 'rgba(0,194,255, 0.14)' // 0% 处的颜色
                      },
                        {
                          offset: 0.15, color: 'rgba(0,194,255, 0.14)' // 100% 处的颜色
                        },
                        {
                          offset: 0.75, color: 'rgba(0,194,255, 0.4)' // 100% 处的颜色
                        },
                        {
                          offset: 1, color: 'rgba(0,194,255, 0.8)' // 100% 处的颜色
                        }],
                      global: false // 缺省为 false
                    }
                  }
                },
                symbolSize: [6, 6],
                lineStyle: { //边缘颜色
                  color: 'rgba(0, 194, 255, 0.8)',
                },
                itemStyle: {
                  color: '#fff',
                  borderColor: '#00c8ff',
                  borderWidth: 1,
                  shadowBlur: 8,
                  shadowColor: '#00c8ff'
                },
              },
              {
                value: this.jiangsuAttractions.map(item => item.total),
                name: '景区总数',
                areaStyle: {
                  normal: {
                    color: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [{
                        offset: 0, color: 'rgba(255, 220, 56, 0.14)' // 0% 处的颜色
                      },
                        {
                          offset: 0.15, color: 'rgba(255, 220, 56, 0.14)' // 100% 处的颜色
                        },
                        {
                          offset: 0.75, color: 'rgba(255, 220, 56, 0.4)' // 100% 处的颜色
                        },
                        {
                          offset: 1, color: 'rgba(255, 220, 56, 0.8)' // 100% 处的颜色
                        }],
                      global: false // 缺省为 false
                    }
                  }
                },
                symbolSize: [6, 6],
                lineStyle: { //边缘颜色
                  color: 'rgba(255, 220, 56, 0.8)',
                },
                itemStyle: {
                  color: '#fff',
                  borderColor: '#cdbd3e',
                  borderWidth: 1,
                  shadowBlur: 8,
                  shadowColor: '#cdbd3e'
                },
              },
            ]
          }
        ]
      }
      myEcharts.setOption(options);
    }
  }
}
</script>

<style scoped lang="scss">

$easeTimer: 1;

@function ease-time($easeTimer) {
  @return unquote($easeTimer + 's');
}

@for $i from 1 through 10 {
  .ease#{$i} {
    animation: ease ease-time($easeTimer + $i);
  }
}

@keyframes ease {
  from {
    opacity: 0; // 初始透明度
  }
}

.item-title {
  color: white;
  width: 100%;
  height: 13%;
  display: flex;
  flex-direction: column;
  align-content: center;
}

.item-box {
  width: 100%;
  height: 85%;
}

.flex1 {
  flex: 1;
}
</style>